<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog :title="title" :visible.sync="visible" width="600px" append-to-body :before-close="cancel">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级菜单" prop="pid">
            <TreeSelect
              v-model="form.pid"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级菜单"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio label="M">目录</el-radio>
              <el-radio label="C">菜单</el-radio>
              <el-radio label="F">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="form.type != 'F'" label="菜单图标" prop="icon">
            <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
              @show="$refs['iconSelect'].reset()">
              <IconSelect ref="iconSelect" @selected="selected"/>
              <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                <svg-icon
                  v-if="form.icon"
                  slot="prefix"
                  :icon-class="form.icon"
                  class="el-input__icon"
                  style="height: 32px;width: 16px;"
                />
                <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
              </el-input>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入菜单名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="sort">
            <el-input-number v-model="form.sort" controls-position="right" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.type != 'F'" label="是否外链">
            <el-radio-group v-model="form.isFrame">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.type != 'F'" label="路由地址" prop="path">
            <el-input v-model="form.path" placeholder="请输入路由地址"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.type == 'C'">
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="form.component" placeholder="请输入组件路径"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.type != 'F'" label="是否显示" prop="hidden">
            <el-switch v-model="form.hidden"
              :active-value=0
              :inactive-value=1 />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.type != 'F'" label="是否启用" prop="status">
            <el-switch v-model="form.status"
                       :active-value=1
                       :inactive-value=0 />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import TreeSelect from "@riophae/vue-treeselect";
  import IconSelect from "@/components/IconSelect";
  import { list, add, update} from "@/api/system/authority";
  export default {
    components: { TreeSelect,IconSelect},
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        visibleOptions: [
          {"dictValue": true, dictLabel: "隐藏"},
          {"dictValue": false, dictLabel: "显示"}
        ],
        statusOptions: [
          {"dictValue": 0, dictLabel: "禁用"},
          {"dictValue": 1, dictLabel: "启用"}
        ],
        // 菜单树选项
        menuOptions: [],
        // 表单参数
        form: {
          id: undefined,
          pid: -1,
          name: undefined,
          icon: undefined,
          type: "M",
          sort: undefined,
          isFrame: "1",
          hidden: false,
          status: 1
        },
        // 表单校验
        rules: {
          name: [
            {required: true, message: "菜单名称不能为空", trigger: "blur"}
          ],
          orderNum: [
            {required: true, message: "菜单顺序不能为空", trigger: "blur"}
          ],
          path: [
            {required: true, message: "路由地址不能为空", trigger: "blur"}
          ]
        }
      }
    },
    mounted() {
      this.getTreeSelect();
    },
    methods: {
      // 选择图标
      selected(name) {
        this.form.icon = name;
      },
      /** 查询菜单下拉树结构 */
      getTreeSelect() {
        var _this = this;
        list().then(response => {
          _this.options = [];
          const authority = { id: -1, name: '主类目', children: [] };
          authority.children = response.data;
          _this.menuOptions.push(authority);
        });
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        };
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              update(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.cancel();
                  this.$parent.getList();
                }
              });
            } else {
              add(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.cancel();
                  this.$parent.getList();
                }
              });
            }
          }
        });
      },
      // 取消按钮
      cancel() {
        this.$emit('update:visible', false);
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          pid: -1,
          name: undefined,
          icon: undefined,
          type: "M",
          sort: undefined,
          isFrame: "1",
          hidden: 0,
          status: 1
        };
        this.resetForm("form");
      },
    }
  }
</script>
